<template>
	<view class="header-bg pb-safe-area page"
	:style="WEBCONFIG?.page_bg_image?'--bg-image-url:url('+WEBCONFIG?.page_bg_image+');background-size: 100% 100%;':''">
		<view class="p-4">
			<!-- #ifdef MP-WEIXIN -->
			<view class="flex flex-center mb-4 rounded-2 py-4" v-if="WEBCONFIG?.wechat_mp_audit">
				<view class="mr-4">
					<image src="@/static/icon-1.png" class="block-icon" mode="aspectFit" />
				</view>
				<view class="flex-1">
					<view class="text-primary font-weight-600 pb-2">{{ gameInfo.name }}</view>
				</view>
			</view>
			<view class="flex flex-center mb-4 rounded-2 py-4" v-else>
				<view class="mr-4">
					<image src="@/static/icon-1.png" class="block-icon" mode="aspectFit" />
				</view>
				<view class="flex-1">
					<view class="text-primary font-weight-600 pb-2">{{ gameInfo.name }}</view>
					<view class="h10 text-primary-light-1">开通会员畅玩全站</view>
				</view>
				<uni-icons type="vip-filled" class="vip-icon" size="16" color="var(--xl-primary)"></uni-icons>
				<view class="h9 text-primary-light-1 font-weight-600 py-4 pr-4 pl-2" @tap="handleClickVipMember">
					{{ WEBCONFIG?.vip_member_name }}</view>
			</view>
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<view class="flex flex-center mb-4 rounded-2 py-4">
				<view class="mr-4">
					<image src="@/static/icon-1.png" class="block-icon" mode="aspectFit" />
				</view>
				<view class="flex-1">
					<view class="text-primary font-weight-600 pb-2">{{ gameInfo.name }}</view>
					<view class="h10 text-primary-light-1">开通会员畅玩全站</view>
				</view>
				<uni-icons type="vip-filled" class="vip-icon" size="16" color="var(--xl-primary)"></uni-icons>
				<view class="h9 text-primary-light-1 font-weight-600 py-4 pr-4 pl-2" @tap="handleClickVipMember">
					{{ WEBCONFIG?.vip_member_name }}</view>
			</view>
			<!-- #endif -->
			<x-vip-grid :list="gameInfo.VipList" :game="search.game" @selected="handleClickVipItem"/>
		</view>
		<x-pay ref="xPayRef" @success="getGameInfo" @vipmember="handleClickVipMember" />
		<x-login ref="xLoginRef" @success="getGameInfo"/>
		<x-vip ref="xVipRef" @success="getGameInfo"/>
		<x-tabbar :page="search.game" />
	</view>
</template>
<script lang="ts" setup>
import { ref,nextTick } from 'vue';
import { onLoad,onShareAppMessage, onShareTimeline } from "@dcloudio/uni-app";
import { $page,$message, $http, login } from '@/utils';
import { useUserStore,useWebConfigStore,useRefs } from '@/stores';
const xPayRef = ref();
const xVipRef = ref();
const xLoginRef = ref();
const webConfigStore = useWebConfigStore();
const { WEBCONFIG } = useRefs(webConfigStore);
const userStore = useUserStore();
const { USERINFO } = useRefs(userStore);
const search = ref({});
const gameInfo = ref({
	name:'',
	VipList:[]
});
onLoad((options: any) => {
	if(options.game){
		search.value.game = options.game;
	}
	getGameInfo();
	// #ifdef MP-WEIXIN
	getDealer();
	// #endif
})
const dealer = ref({
	icode: ''
})
onShareAppMessage(()=>{
	return $page.shareMessage({
		title: gameInfo.value.name,
		path: `/pages/index/index?game=${search.value.game}`
	})
})
onShareTimeline(()=>{
	return $page.shareTimeline({
		title: gameInfo.value.name,
		path: `/pages/index/index?game=${search.value.game}`
	})
})
const getDealer = () => {
	if(!userStore.hasLogin()){return;}
	$http.get('Dealer/dealer').then((res: any) => {
		if (res.code === $http.ResponseCode.SUCCESS) {
			dealer.value = res.data;
		}
	})
}
const getGameInfo = () => {
	$http.get('Game/index', {
		data: search.value
	})
		.then((res: any) => {
			if (res.code === $http.ResponseCode.SUCCESS) {
				gameInfo.value = res.data;
				nextTick(() => {
					$page.title(gameInfo.value.name);
				})
			}
		}).catch((err: any) => {
		})
}
const handleClickVipItem = (item: any) => {
	if (item.unlock) {
		$page.open(`/pages/${item.page}/${item.game}?id=${item.id}`)
	} else {
		if (item.page === 'vipmember') {
			handleClickVipMember();
		} else if (userStore.hasLogin()) {
			xPayRef.value.show({
				type: 'vip',
				alias_id: item.id,
				price: item.price,
				title: item.game_name + ' - ' + item.title,
				data: item
			});
		} else {
			login({
				redirect: 'home',
				game: item.game,
				action: `vip-${item.id}`
			}, xLoginRef);
		}
	}
}
const handleClickVipMember=()=>{
	if(userStore.hasLogin()){
		if(USERINFO.vip_state&&!USERINFO.vip_time){
			return $message.success('您当前已是永久会员，无需再次购买');
		}
		xVipRef.value.show();
	}else{
		login({
			redirect: 'home',
			action: 'vipmember'
		},xLoginRef);
	}
}
</script>
<style lang="scss">
.page{
	min-height: calc(100vh - var(--window-bottom));
	padding-top: max(var(--window-top), 50px);
	// #ifdef MP-WEIXIN
	padding-top: max(var(--window-top), 80px);
	// #endif
	box-sizing: border-box;
	--bg-image-url: url(@/static/header-img.png);
	background-image: var(--bg-image-url);
	background-size: 100% auto;
	background-repeat: no-repeat;
	background-color: var(--xl-grey);
}

.block-icon {
	width: 45px;
	height: 45px;
}

</style>